<script setup>
import {computed, reactive, ref, watch} from "vue";
//================================================【组件通信】============================================================
//父组件传递的数据
const props = defineProps({
  //搜索关键词
  searchKeyWord:{
    type:String,
    required:false
  },
  //面板全部数据
  panelAllData:{
    type:Array,
    required:true
  }
});
//=======================================================【传出】
const emit = defineEmits(['searchPanelItemClick','update:searchKeyWord'])
//================================================【公用相关】============================================================
//搜索内容
let curSearchKeyWord = ref('')
//================================================【组件属性】============================================================
//控制下拉面板显示与隐藏
const isDropdownVisible = computed(()=>{
  return curSearchKeyWord.value !== '' && !isSearchPanelHideTemporarily.value
})
//面板全部数据
const curPanelAllData = reactive([])
//监听面板全部数据
watch(()=>props.panelAllData,(newValue)=>{
  curPanelAllData.splice(0,curPanelAllData.length,...newValue)

  //当搜索词改变后，等待返回新的面板数据
  if (isWaitingNewPanelAllData){
    loadShowData(true)
    isWaitingNewPanelAllData = false
  }
},{deep:true})
//获取父组件搜索词
var isWaitingNewPanelAllData = false
watch(()=>props.searchKeyWord,(newValue)=>{
  curSearchKeyWord.value = newValue
},{deep:true})
//监听当前组件搜索词
watch(curSearchKeyWord,(newValue)=>{
  isWaitingNewPanelAllData = true
  emit('update:searchKeyWord',newValue)
})
//================================================【普通方法】============================================================
//==================================================================【搜索框】
//搜索区域点击
function searchAreaClick() {
  isSearchPanelHideTemporarily.value ?
      isSearchPanelHideTemporarily.value = false
      :
      null
}
//==================================================================【搜索面板】
//面板暂时隐藏
const isSearchPanelHideTemporarily = ref(false)
//面板展示数据
const panelShowData = reactive([])
//面板外部点击
function dropdownClickOutSide() {
  isSearchPanelHideTemporarily.value = true
}
//面板项点击
function searchPanelItemClick(clickItem) {
    emit('searchPanelItemClick',clickItem)
    //设置搜索面板临时隐藏
    isSearchPanelHideTemporarily.value = true
}
/**
 * 加载展示数据
 * @param isInit    是否为初始化
 */
function loadShowData(isInit) {
  let loadFactor = 0;

  //设置加载量
  if (isInit) {
    panelShowData.splice(0, panelShowData.length);
    loadFactor = 20;
  } else {
    loadFactor = 10;
  }

  //载入
  if (curPanelAllData.length > loadFactor) {
    panelShowData.push(...curPanelAllData.splice(0, loadFactor));
  } else {
    panelShowData.push(...curPanelAllData.splice(0, curPanelAllData.length));
  }
}
//================================================【生命周期】============================================================
</script>

<template>
  <j-dropdown
      placement="bottom-start"
      trigger="custom"
      @clickoutside="dropdownClickOutSide"
      :visible="isDropdownVisible">
    <div @click="searchAreaClick">
      <j-input
          placeholder="输入搜索内容"
          v-model="curSearchKeyWord"
          clearable
          @clear="curSearchKeyWord === ''">
        <template #suffix>
          <j-icon type="icon-search"></j-icon>
        </template>
      </j-input>
    </div>
    <template #list>
      <div class="j_dropdown_menu_class">

        <j-dropdown-menu v-for="(check,index) in panelShowData" :key="check.code">
          <j-dropdown-item @click="searchPanelItemClick(check)">
             <slot name="dropDownItemTemp" :itemData="check"></slot>
          </j-dropdown-item>
          <j-dropdown-item
              v-if="curPanelAllData.length > 0 && index === panelShowData.length-1"
              @click="loadShowData(false)">
            <div style="width: 100%;text-align: center">
              ---加载更多---
            </div>
          </j-dropdown-item>
          <div v-if="curPanelAllData.length === 0 && index === panelShowData.length-1"
               style="width: 100%;text-align: center">
            ---加载完毕---
          </div>
        </j-dropdown-menu>
        <div v-if="panelShowData.length === 0"
             style="width: 100%;text-align: center">
          ---暂无数据---
        </div>
      </div>
    </template>
  </j-dropdown>
</template>

<style scoped>
.j_dropdown_menu_class{
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
}
.j_dropdown_menu_class .nonModelFontClass{
  color: #c1c1c1;
}
</style>
